<template>
    <div class="instance-container">
        <section class="search-bar">
            <search-bar></search-bar>
        </section>

        <div class="instance-mesh">
            <template v-for="instance in instances.instances">
                <section class="instance-item" @click="navigate(instance)" :key="instance.id">
                    <img
                        v-if="instance.instanceStatus === 'UP'"
                        src="@/assets/img/up@1x.png"
                        title="up"/>
                    <img
                        v-if="instance.instanceStatus === 'DOWN'"
                        src="@/assets/img/down@1x.png"
                        title="down" />
                    <img
                        v-if="instance.instanceStatus === 'OFFLINE'"
                        src="@/assets/img/offline@1x.png"
                        title="offline" />

                    <div class="instance-detail">
                        <span>{{ instance.instanceName }}</span>

                        <span>Owner: {{ instance.owner }}</span>
                        <span>ProjectKey: {{ instance.projectKey }}</span>
                        <span>http://{{ instance.clientIp }}:{{ instance.clientPort }}</span>
                    </div>
                </section>
            </template>
        </div>
    </div>
</template>

<script>
    import SearchBar from '../../components/search-bar/SearchBar.vue';

    export default {
        name: 'Instances',
        components: {
            SearchBar,
        },
        computed: {
            instances() {
                return this.$store.state.instances;
            },
        },
        methods: {
            navigate(instance) {
                this.$store.commit('instances/changeInstance', instance);
                this.$router.push(`/instance/${instance.id}`);
            },
        },
        mounted() {
            this.$store.dispatch('instances/loadInstances', this.$route.params.sid);
        },
    };
</script>

<style lang="scss" scoped>
    .instance-item {
        display: flex;
        flex-direction: row;
        float: left;
        margin: 24px 4% 0 0;
        padding: 10px;
        width: calc(22% - 20px);
        height: 125px;
        background: #FFF;
        border-radius: 8px;
        box-shadow: 0 0 10px 0 rgba(226, 232, 237, .5);
        cursor: pointer;

        &:nth-of-type(4n) {
            margin-right: 0;
        }

        & > img {
            margin-right: 3%;
            width: 95px;
            height: 95px;
        }

        & > .instance-detail {
            display: flex;
            flex-direction: column;
            margin-top: 7px;

            span {
                font-size: 12px;
                font-weight: 400;
                color: rgba(0, 0, 0, .45);
                cursor: pointer;

                &:first-of-type {
                    margin-bottom: 3px;
                    font-size: 16px;
                    color: rgba(0, 0, 0, .85);
                }
            }
        }
    }
</style>
